<template>
	<view class="cate">
		<scroll-view class="cate-list">
			<view class="item" :class="{active:item.id==selectId}" v-for="(item,index) in cateOneList" key="index"
				@tap="changeSelect(item.id)">
				{{item.name}}
			</view>
		</scroll-view>
		<scroll-view class="cate-goods"></scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	onLoad(() => {
		getCateOneList()

	})
	// 获取一级分类列表
	const cateOneList = ref([])
	async function getCateOneList() {
		let res = await uni.$post("/categoryListLevel", {
			"level": 1
		})
		if (res.code == 200) {
			cateOneList.value = res.result
			cateOneList.value.unshift({
				id: 0,
				name: "全部"
			})
		}
		console.log(cateOneList.value)
	}
	const selectId = ref(0)

	function changeSelect(id) {
		selectId.value = id
	}
</script>

<style>
	.cate>.cate-list {
		text-align: center;
		width: 180rpx;
		background-color: #efefef;
		border: 1px solid #ff34ff;
		height: calc(100vh -97px);
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */
	}

	.item {
		font-size: 12px;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
	}

	.active {
		background-color: #ff6700;
		color: #efefef;
	}

	.cate>.cate-list>.item {}

	/* // 商品列表区域样式 */
	.cate .cate-goods {
		width: 570rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}
</style>